<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>所有订单的初始位置</title>
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=KLQBZ-LR6CD-3U64B-PN3P3-ZFGT6-LFFJU"></script>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>


    <style type="text/css">
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #container {
            width: 80%;
            height: 70%;
        }
    </style>
</head>
<body>
<input type="submit" value="显示所有的点" id="btn">
<div id="container"></div>


<script>
    let center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
    //初始化地图
    let map = new TMap.Map("container", {
        center: center
    });

    $(function () {
        $("#btn").click(function(){
            $.post("${pageContext.request.contextPath}/location/l2",function (data) {
                console.log(data);
                let obj = JSON.parse(data);
                console.log(obj);
                for (let i=0;i<obj.length;i++){

                    //初始化marker
                    let marker = new TMap.MultiMarker({
                        id: "marker-layer"+i, //图层id
                        map: map,
                        styles: { //点标注的相关样式
                            "marker": new TMap.MarkerStyle({
                                "width": 25,
                                "height": 35,
                                "anchor": { x: 16, y: 32 },
                                "src": "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png"
                            })
                        },

                        geometries: [{ //点标注数据数组
                            "id": "demo"+i,
                            "styleId": "marker",
                            "position": new TMap.LatLng(obj[i].lon, obj[i].lat),
                            "properties": {
                                "title": "marker"
                            }
                        }]
                    });

                }
            });

        })
    });

</script>
</body>
</html>
